<template>
  <div class="pagination-box">
    <el-pagination
      background
      layout="total, prev, pager, next, sizes"
      v-model:current-page="pageOption.page"
      v-model:page-size="pageOption.pagesize"
      :total="pageOption.total"
      :hide-on-single-page="!true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup name="user">
import { ref, reactive, computed, toRef, toRefs, toRaw } from "vue";

const props = defineProps(['pageOption'])
const emit = defineEmits(['search'])

const handleSizeChange = (val) => {
  emit('search', {pagesize: val})
};
const handleCurrentChange = (val) => {
  console.log('handleCurrentChange');
  
  emit('search', {page: val})
};


</script>

<style lang="less" scoped>

.pagination-box {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>
